<!-- <script setup>
import { ref } from 'vue'

const isVisible = ref(true)

function toggleVisibility() {
  isVisible.value = !isVisible.value
}
</script>
<template>
  <button @click="toggleVisibility">
    {{ isVisible ? '隐藏' : '显示' }}
  </button>

  <p v-if="isVisible">现在你能看到我</p>
</template>
isVisible为false时，p标签不渲染,直接从dom中删除 -->
<!-- <script setup>
import { ref } from 'vue'

const type = ref('C')
</script>
<template>
  <div>
    <div v-if="type === 'A'">类型是 A</div>
    <div v-else-if="type === 'B'">类型是 B</div>
    <div v-else-if="type === 'C'">类型是 C</div>
    <div v-else>不是 A/B/C 中的任何一种</div>
  </div>
</template> -->
<!-- <script setup>
import { ref } from 'vue'

const isVisible = ref(true)
</script>
<template>
  <p v-show="isVisible">使用 v-show 控制显示</p>
</template> -->
<!-- <script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, text: '学习 JavaScript' },
  { id: 2, text: '学习 Vue' },
  { id: 3, text: '构建一个项目' },
])
</script>
<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.text }}</li>
  </ul>
</template> -->
<!-- <script setup>
import { reactive } from 'vue'

const userInfo = reactive({
  name: '张三',
  age: 30,
  occupation: '工程师',
})
</script>
<template>
  <ul>
    <li v-for="(value, key, index) in userInfo" :key="key">{{ index }}. {{ key }}: {{ value }}</li>
  </ul>
</template> -->
<!-- <script setup>
import { ref } from 'vue'

const items = ref(['苹果', '香蕉', '橙子'])

function addItem() {
  items.value.push('葡萄') // 视图会自动更新
}

function removeItem() {
  items.value.pop() // 视图会自动更新
}

function sortItems() {
  items.value.sort() // 视图会自动更新
}
</script>
<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>

  <div>
    <button @click="addItem">添加水果</button>
    <button @click="removeItem">移除水果</button>
    <button @click="sortItems">排序水果</button>
  </div>
</template> -->
<!-- <script setup>
import { ref } from 'vue'

const numbers = ref([1, 2, 3, 4, 5])

function filterEvenNumbers() {
  // 创建新数组并赋值给 numbers.value
  numbers.value = numbers.value.filter((n) => n % 2 === 0)
}
</script>
<template>
  <ul>
    <li v-for="n in numbers" :key="n">{{ n }}</li>
  </ul>

  <button @click="filterEvenNumbers">只显示偶数</button>
</template> -->
<!-- <script setup>
import { ref } from 'vue'

const users = ref([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
])
</script>
<template>
  <div v-for="user in users" :key="user.id">
    {{ user.name }}
  </div>
</template> -->
<!-- <script setup>
import { ref, computed } from 'vue'

const items = ref([
  { id: 1, name: '苹果', price: 5 },
  { id: 2, name: '香蕉', price: 3 },
  { id: 3, name: '橙子', price: 4 },
  { id: 4, name: '葡萄', price: 8 },
])

const searchQuery = ref('')

// 过滤后的列表
const filteredItems = computed(() => {
  return items.value.filter((item) =>
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase()),
  )
})

// 排序后的列表（按价格从低到高）
const sortedItems = computed(() => {
  return [...filteredItems.value].sort((a, b) => a.price - b.price)
})
</script>
<template>
  <input v-model="searchQuery" placeholder="搜索水果..." />

  <h3>过滤后的列表</h3>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }} - ¥{{ item.price }}</li>
  </ul>

  <h3>排序后的列表（价格从低到高）</h3>
  <ul>
    <li v-for="item in sortedItems" :key="item.id">{{ item.name }} - ¥{{ item.price }}</li>
  </ul>
</template> -->
<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式状态
const newTask = ref('')
const tasks = ref([
  { id: 1, text: '学习 Vue3 基础', completed: false },
  { id: 2, text: '练习组合式 API', completed: true },
  { id: 3, text: '构建一个小项目', completed: false },
])
let nextTaskId = 4

// 过滤类型
const filterType = ref('all') // 'all', 'active', 'completed'

// 过滤后的任务列表
const filteredTasks = computed(() => {
  switch (filterType.value) {
    case 'active':
      return tasks.value.filter((task) => !task.completed)
    case 'completed':
      return tasks.value.filter((task) => task.completed)
    default:
      return tasks.value
  }
})

// 统计信息
const statistics = computed(() => {
  const total = tasks.value.length
  const completed = tasks.value.filter((task) => task.completed).length
  const active = total - completed
  return { total, completed, active }
})

// 方法
function addTask() {
  if (newTask.value.trim()) {
    tasks.value.push({
      id: nextTaskId++,
      text: newTask.value,
      completed: false,
    })
    newTask.value = ''
  }
}

function toggleTask(task) {
  task.completed = !task.completed
}

function removeTask(taskId) {
  tasks.value = tasks.value.filter((task) => task.id !== taskId)
}

function clearCompleted() {
  tasks.value = tasks.value.filter((task) => !task.completed)
}

// 自动聚焦到输入框
const newTaskInput = ref(null)
onMounted(() => {
  newTaskInput.value.focus()
})
</script>
<template>
  <div class="task-app">
    <h1>任务列表</h1>

    <!-- 添加新任务 -->
    <div class="task-form">
      <input
        ref="newTaskInput"
        v-model="newTask"
        placeholder="添加新任务..."
        @keyup.enter="addTask"
      />
      <button @click="addTask">添加</button>
    </div>

    <!-- 过滤选项 -->
    <div class="task-filters">
      <button :class="{ active: filterType === 'all' }" @click="filterType = 'all'">所有</button>
      <button :class="{ active: filterType === 'active' }" @click="filterType = 'active'">
        未完成
      </button>
      <button :class="{ active: filterType === 'completed' }" @click="filterType = 'completed'">
        已完成
      </button>
    </div>

    <!-- 任务列表 -->
    <div v-if="filteredTasks.length > 0" class="task-list">
      <div
        v-for="task in filteredTasks"
        :key="task.id"
        class="task-item"
        :class="{ completed: task.completed }"
      >
        <input type="checkbox" :checked="task.completed" @change="toggleTask(task)" />
        <span class="task-text">{{ task.text }}</span>
        <button @click="removeTask(task.id)" class="delete-btn">删除</button>
      </div>
    </div>
    <div v-else class="empty-message">
      <p>没有符合条件的任务</p>
    </div>

    <!-- 底部工具栏 -->
    <div class="task-footer">
      <span>{{ statistics.active }} 个待办, {{ statistics.completed }} 个已完成</span>
      <button v-if="statistics.completed > 0" @click="clearCompleted">清除已完成</button>
    </div>
  </div>
</template>
<style scoped>
.task-app {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
}

.task-form {
  display: flex;
  margin-bottom: 20px;
}

.task-form input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.task-form button {
  padding: 10px 15px;
  font-size: 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.task-filters {
  display: flex;
  margin-bottom: 15px;
}

.task-filters button {
  flex: 1;
  padding: 8px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  cursor: pointer;
}

.task-filters button.active {
  background-color: #42b983;
  color: white;
}

.task-list {
  margin-bottom: 20px;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.task-item.completed .task-text {
  text-decoration: line-through;
  color: #999;
}

.task-text {
  flex: 1;
  margin: 0 10px;
}

.delete-btn {
  padding: 3px 8px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.empty-message {
  text-align: center;
  color: #999;
  padding: 20px 0;
}
</style>
